<template>
  <el-form-item label="频道：" prop="channelId">
    <!-- channelId 表示当前用户选中的频道id
      在任意组件都可添加 v-model,有两个变化
      1.给这个组件传递名为value的属性
      2.它会自动监听这个组件的input事件，并将更新的值自动绑定到v-model绑定的值上
    -->
    <el-select v-model="channelId" placeholder="请选择频道" @change="hchange">
    <!-- :value="channel.id" 可以不写 -->
    <el-option
      v-for="channel in channelList"
      :key="channel.id"
      :label="channel.name"
      :value="channel.id"></el-option>
    </el-select>
  </el-form-item>
</template>

<script>
// 1. 取回频道数据
//    根据接口文档，在加载组件时调用方法
// 2. 绑定在组件中，让数据显示在视图
//    v-for
export default {
  name: 'Channel',
  // 接受v-model中的value值
  props: ['value'],
  data () {
    return {
      // 双向绑定显示频道
      // channelId: '',
      channelId: this.value,
      // 频道选项列表
      channelList: []
    }
  },
  // 侦听channelId中的值变化，赋值给频道id,显示在编辑页面
  watch: {
    value (newVal, oldVal) {
      // console.log(oldVal)
      this.channelId = newVal
    }
  },
  created () {
    this.loadChannels()
  },
  methods: {
    // v-model中实现父子传值--传频道id
    hchange () {
      this.$emit('input', this.channelId)
    },
    async loadChannels () {
      const result = await this.$http({
        methods: 'get',
        url: '/mp/v1_0/channels'
      })
      // console.log('频道数据', result)
      this.channelList = result.data.data.channels
    }
  }
}
</script>

<style>

</style>
